<script lang="ts" setup>

import {ref} from "vue";

const tagName = ref('')

const submit = () => {
  console.log(tagName.value)
  uni.$u.toast('添加成功')
  tagName.value = ''
}
</script>

<template>
  <view class="container">
    <view class="notice">
      <p> 1. 标签名称需要体现具体应用学生工作服务场景；</p>
      <p> 2. 标签名称所填的示例内容需要尽可能与实际人物刻画类似；</p>
      <p> 3. 新增标签仅支持中文，限制输入10个中文字符；</p>
    </view>
    <view class="input-box">
      <up-input v-model="tagName" placeholder="请输入标签名称" shape="circle"></up-input>
    </view>
    <view class="btn">
      <up-button custom-style="background:#2E6BF8;" shape="circle" text="提交" type="primary"
                 @click="submit"></up-button>
    </view>
  </view>
</template>


<style lang="scss" scoped>
.container {
  padding: 30rpx;
  background-color: #F3F5F9;
  height: 100vh;

  .notice {
    width: 654rpx;
    height: 144rpx;
    font-size: 24rpx;
    color: #7B8293;
    line-height: 48rpx;
  }

  .input-box {
    margin-top: 24rpx;
    width: 686rpx;
    height: 70rpx;
    background: #FFFFFF;
    border-radius: 50rpx;
  }

  .btn {
    position: absolute;
    bottom: 68rpx;
    width: 686rpx;
  }
}
</style>
